<template>
    <div class="regcn">

        <div class="pic">
            <img src="../../assets/images/reg/new/reg_bg_01.png" />
        </div>

        <reg-con></reg-con>

        <div class="code_con">
            <regcon ref="regcon" style="margin-bottom:20px"></regcon>

            <div style="margin-bottom:20px">
                <img src="../../assets/images/reg/new/reg_bg_04.png" />
            </div>

            <div style="margin-bottom:20px">
                <img src="../../assets/images/reg/new/reg_bg_07.png" />
            </div>

            <div class="board">
                <div class="title">选择期限</div>
                <ul class="seperate" style="margin-bottom:20px">
                    <li class="trip">
                        <label @click="setPe(0)">
                            <i class="fa" v-bind:class=" { 'on': interest.period == 0, 'off': interest.period != 0  }"></i>1个月</label>
                    </li>

                    <li class="trip">
                        <label @click="setPe(1)">
                            <i class="fa" v-bind:class=" { 'on': interest.period == 1, 'off': interest.period != 1  }"></i>3个月</label>
                    </li>

                    <li class="trip">
                        <label @click="setPe(2)">
                            <i class="fa" v-bind:class=" { 'on': interest.period == 2, 'off': interest.period != 2  }"></i>6个月</label>
                    </li>

                    <li class="trip">
                        <label @click="setPe(3)">
                            <i class="fa" v-bind:class=" { 'on': interest.period == 3, 'off': interest.period != 3  }"></i>12个月</label>
                    </li>

                    <li class="trip">
                        <label @click="setPe(4)">
                            <i class="fa" v-bind:class=" { 'on': interest.period == 4, 'off': interest.period != 4  }"></i>24个月</label>
                    </li>

                    <li class="trip">
                        <label @click="setPe(5)">
                            <i class="fa" v-bind:class=" { 'on': interest.period == 5, 'off': interest.period != 5  }"></i>36个月</label>
                    </li>


                </ul>


                <div class="title">选择本金</div>
                <ul class="seperate" style="margin:0px;">
                    <li class="trip">
                        <label @click="setM(0)">
                            <i class="fa" v-bind:class=" { 'on': interest.money == 0, 'off': interest.money != 0  }"></i>1000元</label>
                    </li>

                    <li class="trip">
                        <label @click="setM(1)">
                            <i class="fa" v-bind:class=" { 'on': interest.money == 1, 'off': interest.money != 1  }"></i>5000元</label>
                    </li>

                    <li class="trip">
                        <label @click="setM(2)">
                            <i class="fa" v-bind:class=" { 'on': interest.money == 2, 'off': interest.money != 2  }"></i>10000元</label>
                    </li>

                    <li class="trip">
                        <label @click="setM(3)">
                            <i class="fa" v-bind:class=" { 'on': interest.money == 3, 'off': interest.money != 3  }"></i>50000元</label>
                    </li>

                    <li class="trip">
                        <label @click="setM(4)">
                            <i class="fa" v-bind:class=" { 'on': interest.money == 4, 'off': interest.money != 4  }"></i>100000元</label>
                    </li>
                </ul>

                <div style="margin-top:20px;  font-size:16px;color: #d63a3b;">
                    计算利息(先息后本):
                    <span style=" font-size:18px;font-weight:bold;">{{profit}}元</span>
                </div>
            </div>

            <div style="padding-bottom:50px;">
                <button class="btn btn-yellow" @click="goTop()" style="border-radius: 50px">确认领取3338元现金红包</button>
            </div>


        </div>
    </div>
</template>

<script>
import Regcon from '../../components/reg.vue';
import api from '../../data/api';
var timera = null;
export default {
    data(){
        return{
            profit: 0,
            interest: {
                period: 0,
                money: 0
            },
            rate: [0.09, 0.09, 0.096, 0.108, 0.12, 0.132],
            month: [1, 3, 6, 12, 24, 36],
            invest: [1000, 5000, 10000, 50000, 100000]
        }
    },

	components: {
		Regcon
	},

    methods: {
        goTop() {

            timera = setInterval(function () {
                var backtop = document.body.scrollTop = document.documentElement.scrollTop;                //速度操作  减速
                var speedtop = backtop / 5;
                document.body.scrollTop = document.documentElement.scrollTop = backtop - speedtop;  //高度不断减少

                console.log(backtop - speedtop)
                if (backtop == 0) {  //滑动到顶端
                    clearInterval(timera);  //清除计时器
                }
            }, 25);
        },

        goReg() {
            window.location.href = "reg.html";
        },

        setPe(key) {
            this.interest.period = key;
            this.getProfit();
        },

        setM(key) {
            this.interest.money = key;
            this.getProfit();
        },

        getProfit() {
            var sub = this.rate[this.interest.period] * this.invest[this.interest.money];
            sub = sub * this.month[this.interest.period] / 12;
            this.profit = sub;
        }
    },
	route: {
		activate ( transition ) {
            transition.next();
            this.getProfit();
        }
    }
}
</script>

<style lang="scss" scoped>


.fa{
    vertical-align: middle;
    width:20px;
    height:20px;
    background-color:#ff786e;
    border-radius: 50%;
    display: inline-block;
    margin-right:5px;
    position: relative;
    &:after{
        content: ' ';
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        width:14px;
        height:14px;
        background-color:#fff4f5;
        border-radius: 50%;
    }
}

.fa.on{
    vertical-align: middle;
    width:20px;
    height:20px;
    background-color:#ff786e;
    border-radius: 50%;
    display: inline-block;
    margin-right:5px;
    position: relative;
    &:after{
        content: ' ';
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        width:14px;
        height:14px;
        background-color:#fff4f5;
        border-radius: 50%;
    }

    &:before{
        content: ' ';
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%, -50%);
        width:8px;
        height:8px;
        background-color:#ff786e;
        border-radius: 50%;
        z-index: 10;
    }
}


.code_con {
    margin-top: 0px;
    width: 95%;
    margin:auto;
}

.regcn {
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0px;
    position: relative;
    overflow-x: hidden;
    margin-bottom: 15px;


    background-color: #ff7976;

    img{
        width:100%;
    }
}

.codebg {
    background-color: #fff;
    border-radius: 5px;
    height: 50px;
    line-height: 50px;
}

.codebg a {
    display: block;
    width: 100%;
    height: 100%;
}

.code_con img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.board {
    text-align: left;
    background-color: #fff4f5;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 5px;
}

.board .title {
    font-size: 16px;
    margin-bottom: 10px;
    color: #d63a3b;
}

.seperate {
    font-size: 0;
    text-align: left;
    margin-bottom:15px;
}

.seperate .trip {
    margin-bottom: 10px;
    color: #d63a3b;
    font-size: 15px;
    font-size: 14px;
    display: inline-block;
    width: 33.33%;
}

/*
.seperate .trip i {
    font-size: 22px;
    vertical-align: bottom;
    color: #ff786e;
    margin-right: 5px;
} */


/* btn */
.btn {
    border: none;
    color: #fff;
    padding: 0px 10px;
    border-radius: 2px;
    font-size: 18px;
    height: 50px;
    width: 100%;
    /* border-radius: 50px; */
    line-height: 50px;
   /*  margin-bottom: 15px; */
    background: #ff6666;
    background: -webkit-linear-gradient(#ff6666, #fe4e42);
    background: -o-linear-gradient(#ff6666, #fe4e42);
    background: -moz-linear-gradient(#ff6666, #fe4e42);
    background: linear-gradient(#ff6666, #fe4e42);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}


.btn-yellow{
    background: #ffd841;
    background: -webkit-linear-gradient(#ffd841, #fd992b);
    background: -o-linear-gradient(#ffd841, #fd992b);
    background: -moz-linear-gradient(#ffd841, #fd992b);
    background: linear-gradient(#ffd841, #fd992b);
}


.btn-grey{
    color:#fff;
    background: none;
    background-color: #964d4b;
}

</style>
